<template>
  <div class="Leftcontainer">
    <button class="ppo" @click="tuituitui">退出登录</button>
    <!-- 上侧内容 -->
    <div class="PersonalInformation">
      <PersonalInformation />
    </div>

    <div class="CiYun">
      <my-sui></my-sui>
    </div>

    <!-- 下侧内容 -->

    <div class="VariousSubjects">
      <EveryCourses />
    </div>
  </div>
</template>

<script>
import MySui from "./MySui.vue";
import PersonalInformation from "./PersonalInformation.vue";
// import VariousSubjects from "./VariousSubjects.vue";
import EveryCourses from "./EveryCourse/EveryCourses.vue";

export default {
  name: "TwoPanelComponent",
  data() {
    return {};
  },
  components: {
    PersonalInformation,
    EveryCourses,
    MySui,
  },
  methods: {
    tuituitui() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style scoped>
.Leftcontainer {
  display: flex;
  flex-direction: column; /* 设置为垂直方向布局 */
  height: 90vh; /* 设置容器高度 */
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.PersonalInformation {
  flex: 3; /* 上侧高度比例为4 */
  width: 100%;
  box-sizing: border-box;
}
.CiYun {
  flex: 3;
  /* background-color: aqua; */
  /* border: 1px #f8a793 solid; */
  margin: 15px 0 10px 0;
  box-sizing: border-box;
}
.VariousSubjects {
  flex: 6.6; /* 下侧高度比例为6 */
  /* background-color: #f77d7d; 下侧背景颜色 */
  width: 100%;
  /* padding: 10px; */
  box-sizing: border-box;
}
.text {
  position: fixed;
  font-size: 16px;
  color: #fff;
  user-select: none;
}
.ppo {
  position: absolute;
  width: 3.5rem;
  height: 1.5rem;
  top: 8px;
  border-radius: 10%;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: rgba(121, 226, 249, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
}
</style>
